<template>
  <div>
    <!-- 父传子 -->
    <!-- 
      语法:
        1. 在父组件中给子组件加属性 (自定义属性, 符合变量命名规则)
        2. 在子组件中使用 props 接收
     -->
    <!-- <MyProduct title="超级好吃的口水鸡儿" price="29" :info="msg"></MyProduct>
    <MyProduct title="香喷喷的脆皮鸭儿" price="49" info="香脆可口!一口掉渣!"></MyProduct> -->
    <my-product
      v-for="item in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="msg"
    ></my-product>
  </div>
</template>

<script>
// 1. 引入
import MyProduct from './components/MyProduct.vue'

export default {
  // 2. 注册
  components: {
    MyProduct
  },
  data() {
    return {
      msg: '鲜嫩多汁!酸辣可口!',
      list: [
        { id: 1, proname: '超级好吃的棒棒糖', proprice: 18.8 },
        { id: 2, proname: '超级好吃的大鸡腿', proprice: 34.2 },
        { id: 3, proname: '超级无敌的冰激凌', proprice: 14.2 }
      ] 
    }
  },
  methods:{
    kanjia(num ,id){
       const item = this.this.find(item =>item.id === id)
    item.proprice -= num
    }
   
  }
}
</script>

<style>

</style>